<template>
  <div class="aside-template container">
    <div class="title">导航</div>
    <div class="content">
      <div class="item" v-for="(item, index) of modules" :key="index" @click="onAdd(item.value)">
        <i class="iconfont" :class="item.icon" />
        <em>{{item.name}}</em>
      </div>
    </div>
    <div class="list">
      <div class="expect"><span>导航模板，敬请期待</span></div>
    </div>
  </div>
</template>

<script>
import { uuid } from '../../../../common/'
import { STORE_NAMESPACE, categoryConstants } from '../../../../config'
import { mapState } from 'vuex'
export default {
  name: 'AsideNavigation',
  data () {
    return {
      modules: [
        {
          name: '分页导航',
          icon: 'icon-daohang3',
          value: 'page'
        },
        {
          name: '滚动导航',
          icon: 'icon-duotugundong',
          value: 'scroll'
        }
      ]
    }
  },
  computed: {
    ...mapState({
      shopId: state => state[STORE_NAMESPACE].shopId
    })
  },
  methods: {
    onAdd (type) {
      const isScroll = type === 'scroll'
      const column = isScroll ? 5 : 4
      this.$store.dispatch(`${STORE_NAMESPACE}/setData`, {
        type: 'push',
        value: {
          uuid: uuid(this.shopId, categoryConstants.NAVIGATION),
          category: categoryConstants.NAVIGATION,
          direction: 'horizontal', // 目前只有横向导航
          type: type, // page分页 scroll 滚动(只支持1行)
          column: column, // 2 <= column <= 6
          row: 1, // row >= 1
          rowHeight: isScroll ? 65 : 80, // 单行高度px, 这里依据4x1的格子计算的
          textHeight: isScroll ? 15 : 20, // 文字高度
          isShowText: true, // 是否显示文字描述
          isShowImg: true, // 是否显示图片, 保留字段, 不作为实现
          scale: 0.75, // 图片缩放
          isMarginBottom: true, // 是否显示与下边的间隔
          elements: new Array(column).fill(null).map(() => ({
            targetType: '0',
            targetParams: '', // 跳转参数
            name: '', // 菜单名
            url: '', // 图片地址
            link: '', // 跳转链接
            uuid: ''
          }))
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
</style>